<template>
    <div class="demo-drawer__content">
        <el-form :model="address">
            <el-form-item label="收货地址" :label-width="formLabelWidth">
                <el-input v-model="address.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系人" :label-width="formLabelWidth">
                <el-input v-model="address.contactName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth">
                <el-input v-model="address.contactPhone"
                          autocomplete="off"
                          maxlength="11"
                          show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-radio-group v-model="address.gender">
                        <el-radio label="1">先生</el-radio>
                        <el-radio label="0">女士</el-radio>
                    </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="addAddress" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "addressForm",
        data(){
            return {
                address: {
                    contactName: '',
                    contactPhone:'',
                    address:'',
                    gender: '',
                    userId:this.$store.state.user.userId
                },
                formLabelWidth: '80px',
                loading: false,
            }
        },
        methods:{
            addAddress(){
                if(!this.$verifyForm(this.address)) return
                if(!this.$verifyPhone(this.address.contactPhone)) return
                this.$axios({
                    method:'post',
                    data:this.address,
                    url:'/user/addAddress'
                }).then(r=>{
                        if(r.data.err_code===0){
                            this.$emit('handleSuc')
                            this.$message.success('添加成功')
                        }else{
                            this.$message.error('网络错误，请稍后重试')
                        }
                        this.loading=false
                })
            },
            cancelForm() {
                this.loading = false
                this.$emit('cancel')
                clearTimeout(this.timer)
            },
        },
    }
</script>

<style lang="less" scoped>
    /deep/ .el-form{
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0 20px;
    }
    /deep/.demo-drawer__footer{
        display:flex;
        justify-content:center;
        button{
            margin:0 10px;
        }
    }
</style>